<div class="container-fluid charts-container" ng-class="{'charts-sidebar-hide' : !sideBarStateShow}">
    <div class="charts-edit-container col-xs-9">
        <div class="panel panel-custom editor">
            <div class="panel-heading editor">指标编辑-{{Index.chart_name}}
                <a ng-click="switchTreeSidebar()" class="show-sidebar">
                    <i class="fa fa-bars"></i>
                </a>
                <a ng-click="gotoDefault()" class="go-default">
                    <i class="glyphicon glyphicon-search"></i>返回
                </a>
                <a ng-click="changeName()" class="go-default">
                    <i class="glyphicon glyphicon-cog"></i>设置
                </a>
                <a ng-click="save()" class="go-default">
                    <i class="glyphicon glyphicon-save"></i>保存
                </a>
            </div>
            <div class="panel-body editor chart-designer">
                <div class="row">
                    <div class="chart-render-container" ng-hide="swithEditorIsShow"  init-index-plugin="" chart-type="Index.chart_type_id"></div>
                    <div class="chart-option-editor">
                        <div ng-hide="!swithEditorIsShow" class="row">
                            <div ui-ace="{
                        require: ['ace/ext/language_tools'],
                        onLoad : aceLoaded
                        }"></div>
                        </div>
                    </div>
                    <div class="chart-render-loading">
                        <i class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></i>
                    </div>
                </div>
                <div class="row action-btn">
                    <button class="btn btn-success pull-right" ng-hide="swithEditorIsShow" type="button" ng-click="swithEditorIsShow = !swithEditorIsShow;loadOptionCode();">配置代码</button>
                    <button class="btn btn-success pull-right" ng-hide="!swithEditorIsShow" type="button" ng-click="swithEditorIsShow = !swithEditorIsShow;">返回设计</button>
                    <button class="btn btn-danger pull-right"  ng-hide="!swithEditorIsShow" type="button" ng-click="swithEditorIsShow = !swithEditorIsShow;writeOptionCode();">更新配置</button>
                    <button class="btn btn-info pull-right" ng-hide="swithEditorIsShow" type="button" ng-click="previewChart()">预览数据</button>
                    <button class="btn btn-warning pull-right" ng-hide="swithEditorIsShow" type="button" ng-click="changeBackground()">切换背景</button>
                    <button class="btn btn-default pull-right" ng-hide="swithEditorIsShow"  type="button" ng-click="addBinding()">新增绑定</button>
                </div>
                <div class="row dataset-binding-container">
                    <div ng-repeat="item in bindingOfIndex">
                        <div class="panel-heading" ng-click="switchBinding(item)">数据集 : {{item.Name}}
                            <i class="glyphicon glyphicon-remove pull-right" ng-click="removeBinding($event,item)"></i>
                            <i class="glyphicon glyphicon-pencil pull-right" ng-click="editBinding($event,item)"></i>
                            <span class="dataset-series-details pull-right">{{item | toBindingDetails}}</span>
                        </div>
                        <div class="panel-body" uib-collapse="item._IsCollapsed">
                            <div class="col-xs-6">
                                <label>维度</label>
                                <div class="dimension-container">
                                    <li ng-repeat="dimension in item.Dimensions">
                                        {{dimension.Name}}
                                        <i class="glyphicon glyphicon-remove" ng-click="removeBindingDimensions(item,dimension)"></i>
                                    </li>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <label>度量</label>
                                <div class="measure-container">
                                    <li ng-repeat="measure in item.Measures">
                                        {{measure.Name}}
                                        <i class="glyphicon glyphicon-remove" ng-click="removeBindingMeasures(item,measure)"></i>
                                    </li>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row chart-property-configurer">
                    <property-configurer></property-configurer>
                </div>
                <div class="row chart-property-editor">
                    <div ng-switch="propertyEditorState">
                        <div ng-switch-when="loading" class="text-center">Loading...</div>
                        <div ng-switch-when="ready">
                            <div ng-include="propertyEditorUrl"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-footer editor">
                <button class="btn btn-success" type="button" ng-click="save()">保存</button>
            </div>
        </div>
    </div>
    <div prevent-right-click  class="col-xs-3 schema-tree-container">

        <div class="row schema-title" ng-click="swithIsCollapsed = !swithIsCollapsed">
            <i class="glyphicon glyphicon-saved"></i>
            <span>关联数据集</span>
        </div>
        <div class="row dataset-select-content" uib-collapse="swithIsCollapsed">
            <div ng-repeat="dataSet in dataSetsOfIndex">
                <div class="panel panel-custom">
                    <div class="panel-heading dataset-title" ng-click="navigateToDataSet(dataSet)">
                        {{dataSet.Name}}({{dataSet.Code}})
                        <i class="glyphicon glyphicon-remove pull-right" ng-click="removeDataSetOfIndex(dataSet)"></i>
                    </div>
                    <div class="panel-body dataset-column">
                        <label>维度列</label>
                        <div ng-repeat="column in dataSet.dimensionColumns">
                            <li ng-click="selectDataSetColumn(dataSet,column)">
                                <i class="glyphicon glyphicon-arrow-left"></i>
                                <span>{{column.Name}}({{column.Code}})</span>
                            </li>
                        </div>
                        <label>度量列</label>
                        <div ng-repeat="column in dataSet.measureColumns">
                            <li ng-click="selectDataSetColumn(dataSet,column)">
                                <i class="glyphicon glyphicon-arrow-left"></i>
                                <span>{{column.Name}}({{column.Code}})</span>
                            </li>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row schema-title" ng-click="swithIsCollapsed = !swithIsCollapsed">
            <i class="glyphicon glyphicon-oil"></i>
            <span>数据集选择</span>
            <i ng-show="isTreeLoading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate tree-refresh"></i>
        </div>
        <div class="row schema-tree" uib-collapse="!swithIsCollapsed">
            <treecontrol class="tree-custom"
                         tree-model="treeModels"
                         options="treeOptions"
                         expanded-nodes="expandedFolders">
                <span class="tree-node-item">
                    <span ng-switch=""  on="node.type">
                         <span ng-switch-when="folder" class="glyphicon glyphicon-folder-open schema_node" aria-hidden="true"></span>
                         <span ng-switch-when="schema" class="glyphicon glyphicon-tasks schema_node" aria-hidden="true"></span>
                         <span ng-switch-when="dataset" class="glyphicon glyphicon-list schema_node" aria-hidden="true"></span>
                    </span>
                     <span ng-switch=""  on="node.type">
                         <span ng-switch-when="folder" aria-hidden="true"><a class="tree-node-hover">{{node.name}}</a></span>
                         <span ng-switch-when="schema" aria-hidden="true"><a class="tree-node-hover">{{node.name}}</a></span>
                         <span ng-switch-when="dataset" ng-click="addDataSetOfIndex($event, node)" aria-hidden="true">
                             <a class="tree-node-hover">{{node.name}}</a>
                         </span>
                    </span>
                    <span ng-switch=""  on="node.type">
                        <span ng-switch-when="dataset" class="glyphicon glyphicon-hand-left" aria-hidden="true"></span>
                    </span>
                </span>
            </treecontrol>
        </div>

    </div>
</div>